<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>产品信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" media="screen"
	href="<%=request.getContextPath()%>/scripts/jqgrid/themes/sand/grid.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="<%=request.getContextPath()%>/scripts/jqgrid/themes/jqModal.css" />
<script type="text/javascript"
	src="<%=request.getContextPath()%>/scripts/jqgrid/jquery.js"></script>
<script
	src="<%=request.getContextPath()%>/scripts/jqgrid/jquery.jqGrid.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jqgrid/js/jqModal.js"
	type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/scripts/jqgrid/js/jqDnR.js"
	type="text/javascript"></script>
<script language="javascript">
	var lastsel2=0;   
	$(function(){   
		$('#grid').jqGrid({   
			height:500,   
			url:'<%=request.getContextPath()%>/pages/test/product_json2.jsp',   
			datatype: 'json',   
			mtype: 'POST',   
			colNames:['ID','产品名称','生产日期','单价','数量'],   
			colModel :[   
			{   name:'productId',  index:'productId', width:180 	},   
			{   name:'productName',  index:'productName',  width:180, editable:true,   
				editrules:{   
					required:true  
				}   
			},   
			{   name:'productDate',  index:'productDate',  editable:true,  hidden:false,   
				editoptions:{   
					size:90   
				},   
				editrules:{   
					edithidden:true  
				}   
			},   
			{   name:'price',  index:'price',  align:'right',  width:90, editable:true,   
				editrules:{   
					required:true  
				}   
			},   
			{   name:'quantity',  index:'quantity',  align:'right', width:90, editable:true,   
				editrules:{   
					required:true  
				}   
			} ],   
			pager: 'nav',   
			rowNum:20,   
			rowList:[10,15,20,25,50],   
			sortname: 'productId',   
			sortorder: "desc",   
			viewrecords: true,   
			imgpath: '<%=request.getContextPath()%>/scripts/jqgrid/themes/sand/images',   
			caption: '产品信息',   
			multiselect:true,   
			editurl:''  
		});   
	  
		//定义按键   
		$('#grid').navGrid('#nav',{   
			refresh: true,   
			edit: true,   
			add: true,   
			del: true,   
			search: true  
		});   
	  
	}); 

	</script>
</head>
<body>
<center>
<table id="grid" class="scroll"></table>
<div id="nav" class="scroll"></div>
</center>
</body>
</html>
